<template>
  <div class="ivz-index">
    <div class="ivz-iir-header">
      Online 在线页面设计器
    </div>
    <a-row :gutter="16" justify="center" class="ivz-iir-row">
      <a-col :span="6" style="max-width: 260px">
        <a-card :hoverable="true" @click.native="clickHandle(1)">
          <template #title style="text-align: center">前端开发者</template>
          <p>
            1. 前端页面设计<br/>
            2. 前端页面代码生成<br/>
            3. 其他
          </p>
        </a-card>
      </a-col>
      <a-col :span="6" style="max-width: 260px">
        <a-card :hoverable="true" @click.native="clickHandle(2)">
          <template #title style="text-align: center">全栈开发者</template>
          <p>
            1. 前端页面设计<br />
            2. 前端页面代码生成<br />
            3. 数据库相关功能
          </p>
        </a-card>
      </a-col>
      <a-col :span="24" class="ivz-iir-desc">
        一款适用于前后端开发者使用的所见即所得的在线设计编辑器
      </a-col>
    </a-row>
  </div>
</template>

<script>
import {useStore} from "vuex";

export default {
  name: "index",
  setup() {
    let store = useStore();
    if(!store) {
      throw new Error("IvzOnline必须依赖和使用vuex作为数据存储");
    }

    if(!store.hasModule("IvzOnlineStore")) {
      console.log(this)
    }
  },
  methods: {
    clickHandle(type) {
      if(type == 1) {
        this.$router.push("/online")
      } else {
        this.$router.push("/online/table")
      }
    }
  }
}
</script>

<style scoped>
.ivz-index {
  width: 100%;
  height: 100%;
  position: relative;
}
.ivz-index .ant-card {
  border-radius: 5px;
}
.ivz-iir-row {
  top: 25%;
  width: 100%;
  position: absolute;
}
.ivz-iir-header {
  color: #ff6600;
  font-size: 32px;
  padding-top: 64px;
  text-align: center;
}
.ivz-iir-desc {
  width: 100%;
  color: #1296ff;
  font-size: 12px;
  margin-top: 24px;
  text-align: center;
}
</style>
